﻿{% extends "base.html" %}
{% load i18n %}

{% block main %}
	
	{% include providerTemplate %}

	<script src="/static/scripts/maps/{{provider}}/map.js" type="text/javascript"></script>

	<div id="map_canvas"></div>

    <script type="text/javascript">		
		
		var locations = [];
		
		{% for location in history %}
			locations.push({latitude: {{location.latitude}}, longitude: {{location.longitude}}});
		{% endfor %}
				
	    $(function onReady()	
		{
			var map = createMap("map_canvas", {{history.0.longitude}}, {{history.0.latitude}}, 14, {showTraffic: true});
			
			{% for location in history %}			
				map.addMarker({{location.latitude}}, {{location.longitude}}, "carIcon", false, "#{{forloop.counter}}", "{{location.updated}} {{location.speed|default:'?'}} км/ч");
			{% endfor %}
			map.addPolyLine(locations, {color: "blue", width: '6', opacity: '0.7'});
			
			{% if user.is_authenticated %}
			
				map.onClick = function(lat, lon)
				{
					map.openBaloon(lat, lon, '<div style="margin:10px">(' + lat + ', ' + lon  + ')</div>' +
										'<center><form method="POST" action="/Add/">' +
										'<input type="hidden" name="limit" value="{{limit}}">' +
										'<input type="submit" value="{% trans "I am here!" %}">' +
										'<input type="hidden" name="longitude" value="' + lon + '"/>' + 
										'<input type="hidden" name="latitude" value="' + lat + '" />' +
										'</form></center>'
									);
				};
			
			{% endif %}			
		});

	</script>

{% endblock %}
